<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-09-24 21:29:46
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-10-08 21:03:03
 * @FilePath: userList.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-24 21:29:46
 * @Description: 
-->
<template>
  <div class="userlist">
    <div class="userlsit-left">
      <el-scrollbar>
        <div class="left-list"
          v-for="(item, index) in friendList.arr" :key="index" 
          :class="{'left-list-bg' : active == item.id}"
          @click="startCall(item.id, item.username)"
          >
          <img :src="item.image" class="left-list-img">
          <span class="left-list-title">{{item.username}}</span>
        </div>
      </el-scrollbar>
    </div>
    <div class="user-list-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, reactive } from 'vue/dist/vue.esm-bundler.js'
  import { useRouter } from 'vue-router'
  // 接口地址
  import {getFriend} from "../../api/friend";

  const router = useRouter()
  const active = ref('')
  let friendList = reactive({arr:[]})

  /**
   * 路由通信
   * @param e uid
   */
  const startCall = (uid : number, username: string) => {
    active.value = uid
    router.push({ path:'chat',query:{uid:uid, username:username}})
  }

  /**
   * 获取好友列表
   */
  const getFriendList = async () => {
    getFriend().then(res => {
      friendList.arr = res.data
    })
  }

  // 钩子函数
  onMounted(() => {
    getFriendList()
  })

</script>

<style scoped>
  .userlist{
    display: flex;
    height: 100%;
    width: 100%;
  }
  .userlist-left{
    padding-top: 20px;
    padding-left: 10px;
    flex: 1;
    border-right: #dbd6d6 1px solid;
  }
  .user-list-right{
    flex: 4;
  }
  .left-list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    grid-template-areas: 'a b'
                         'a b';
    justify-items: center;
    align-items:center;
    margin-top: 10px;
  }
  .left-list-bg{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    grid-template-areas: 'a b'
    'a b';
    justify-items: center;
    align-items:center;
    margin-top: 10px;
    background-color: #eaeaea;
  }
  .left-list-img{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    grid-area:a
  }
  .left-list-title{
    grid-area:b
  }
</style>
